<template>
	<view class="container">
		<view class="common-view">
			<view class="common-detail">
				<uni-icons type="calendar-filled" size="24" color="#3FA7F9"></uni-icons>
				预警名称： {{ ruleFom.taskName }}
			</view>
			<view class="common-detail">
				<uni-icons type="info-filled" size="24" color="#3FA7F9"></uni-icons>
				预警类型：{{ alarmType }}
			</view>
			<view class="common-detail">
				<uni-icons type="videocam-filled" size="24" color="#3FA7F9"></uni-icons>
				预警设备：{{ equipmentName }}
			</view>
			<view class="common-detail">
				<uni-icons type="paperplane-filled" size="24" color="#3FA7F9"></uni-icons>
				预警时间：{{ ruleFom.alarmDatetime }}
			</view>
			<view class="common-detail">
				<uni-icons type="flag-filled" size="24" color="#3FA7F9"></uni-icons>
				预警状态：{{ warningStatus }}
			</view>
			<view class="common-detail">
				<uni-icons type="person-filled" size="24" color="#3FA7F9"></uni-icons>
				处理责任人：{{ ruleFom.currentProcessor }}
			</view>
		</view>

		<view class="monitor-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

		<!-- 图片弹窗 -->
		<!--    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content"
        ><text class="text">
          <image :src="ruleFom.imageUrl" aspectFit> </image> </text
      ></view>
    </uni-popup> -->
		<!-- 预览弹层组件 -->
		<view v-if="showPreview" class="preview-modal">
			<view class="close-btn" @click="showPreview = false">✕</view>
			<movable-area class="movable-area" :scale-area="true">
				<movable-view direction="all" :scale="true" :scale-min="1" :scale-max="4" :scale-value="scale"
					@scale="onScale">
					<image :src="ruleFom.imageUrl" mode="widthFix"></image>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		HOST
	} from "../../static/js/const";

	let showPreview = ref(false);
	let scale = ref(1);
	let ruleFom = ref({
		alarmType: "",
		taskName: "",
		pointId: "",
		equipmentName: "",
		imageUrl: "",
		equipmentCode: "",
	});
	const popup = ref();

	const equipmentName = computed(() => {
		const value = ruleFom.value.equipmentName;
		return value.substring(0, 24);
	});

	const alarmType = computed(() => {
		const value = Number(ruleFom.value.alarmType);
		if (value === 1) {
			return "触网预警";
		} else if (value === 2) {
			return "行为预警";
		}
	});

	const warningStatus = computed(() => {
		const value = Number(ruleFom.value.warningStatus);
		if (value === 1) {
			return "已处理";
		} else if (value === 0) {
			return "待处理";
		}
	});

	const options = ref([]);
	const buttonGroup = ref([{
			text: "预警图片",
			backgroundColor: "#1E83FF",
			color: "#fff",
		},
		{
			text: "监控回放",
			backgroundColor: "linear-gradient(90deg, #3d8ffb, #3d8ffb)",
			color: "#fff",
		},
	]);

	const onClick = (e) => {
		console.log("onClick");
		console.log(e);
	};

	const buttonClick = (e) => {
		if (Number(e.index === 0)) {
			// popup.value.open("center");
			showPreview.value = true;
			scale.value = 1; // 每次打开重置缩放
		} else if (Number(e.index === 1)) {
			uni.navigateTo({
				url: `/pages/early-warning-detail/video?equipmentCode=${ruleFom.value.equipmentCode}&alarmDatetime=${ruleFom.value.alarmDatetime}`, // 这里的URL是登录页面的路径
			});
		}
	};

	const onScale = (e) => {
		scale.value = e.detail.scale; // 更新缩放比例
	};

	onLoad((option) => {
		uni.request({
			url: `${HOST}/alarm/alarmInfo/detail`,
			method: "POST",
			header: {
				"content-type": "application/json",
				Authorization: "Bearer " + uni.getStorageSync("accessToken"),
			},
			data: {
				id: option.id,
			},
			success: (res) => {
				if (res.data.status === "OK" && res.data.flag) {
					ruleFom.value = res.data.data;
					ruleFom.value.imageUrl = res.data.data.imageUrl.replace(/192\.168\.66\.104:6080/g,
						'111.23.104.94:18088').replace(/192\.168\.66\.101:6080/g,
						'111.23.104.94:18090');
				} else if (Number(res.data.code) === 401) {
					uni.showToast({
						title: "登录超时",
						icon: "error",
					});
					uni.removeStorageSync("accessToken");
					uni.reLaunch({
						url: "/pages/login/index", // 这里的URL是登录页面的路径
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
					});
				}
			},
			fail: (err) => {
				console.error("请求失败", err);
				uni.showToast({
					title: "连接失败",
					icon: "error",
				});
			},
		});
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 $myuni-spacing-super-lg;
		background: #d4ecff;
		height: calc(100vh);
		// background-image: url("/static/bg.png");
	}

	.monitor-list-wrapper {
		display: grid;
		/* grid-template-columns: 1fr 1fr 1fr 1fr; */
		grid-template-columns: repeat(2, 1fr);
		gap: $myuni-spacing-lg;

		.monitor-list {
			border-radius: $myuni-border-radius-base;
			padding: $myuni-spacing-lg;
			width: 305rpx;
			background-color: $myuni-bg-color;
			// box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			.monitor-photo {
				height: 200rpx;
				width: 100%;
			}
		}

		.monitor-title {
			height: 32rpx;
			line-height: 32rpx;
			color: $myuni-text-color;
			font-size: $myuni-font-size-lg;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.load-more {
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
	}

	.monitor-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.monitor-carts::v-deep .uni-tab__right {
		border-radius: 5px !important;
	}

	.monitor-carts::v-deep .uni-tab__cart-box {
		background-color: transparent;
	}

	.float {
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);

		.item {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.9);
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		}
	}

	.common-detail {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.preview-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.9);
		z-index: 999;
	}

	.movable-area {
		width: 100%;
		height: 100%;
	}

	movable-view {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	movable-view image {
		max-width: 100%;
		/* 限制图片最大宽度 */
	}

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
		color: white;
		font-size: 40rpx;
		z-index: 1000;
	}
</style>